<script setup>
import { ref } from "vue";
import CustNavigation from "./navigation.vue";
const props = defineProps({
  title: String,
  icon: String,
});

const tabName = [
  { name: "推荐" },
  { name: "手机" },
  { name: "女装" },
  { name: "男鞋" },
  { name: "女鞋" },
  { name: "男装" },
  { name: "玩具乐器" },
  { name: "工业品" },
  { name: "运动" },
  { name: "电脑办公" },
  { name: "美妆" },
  { name: "酒水饮料" },
  { name: "数码" },
  { name: "奢侈品" },
  { name: "食品" },
  { name: "家电" },
  { name: "宠物" },
  { name: "厨具" },
  { name: "图书" },
  { name: "个护清洁" },
  { name: "腕表珠宝" },
  { name: "家具日用" },
];

const click = (item) => {
  console.log(item);
};
</script>

<template>
  <div class="headerComp">
    <CustNavigation :icon="props.icon" :title="props.title"></CustNavigation>
    <up-search
      searchIcon="search"
      height="40"
      margin="10rpx 0"
      borderColor="#ccc"
      :animation="true"
      bgColor="#fff"
      class="search"
      width="300"
      placeholder="输入商品"
      v-model="keyword"
    ></up-search>
    <up-tabs class="tabs" :list="tabName" @click="click"></up-tabs>
  </div>
</template>
<style>
.headerComp {
    background-color: #fff;
    padding-bottom: 15rpx;
}

.search {
    width: 95vw;
}
</style>